<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue'
import { useRoute } from 'vue-router'

let txt = ref("")
const user = useRoute().path.replace('/', '')
const initData = (await fetch("/get?uid=" + user).then(res => res.json()).catch(_ => ['lee']))
let list = ref(initData)
const postData = (val: string): void => {
    fetch("/post", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            uid: user,
            val
        })
      })
      .then(() => {
          txt.value = ''
          list.value.unshift(val)
      })
      .catch(err => {
        console.log(err)
      });
};

const copyToClipboard = (str: string) => {
    const el = document.createElement("textarea");
    el.value = str;
    el.setAttribute("readonly", "");
    el.style.position = "absolute";
    el.style.left = "-9999px";
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);
};

const pasteEvent = (event: any): void => {
    console.log("event", event);
    const data = event.clipboardData;
    // const items = event.clipboardData && event.clipboardData.items;
    // let file = null;
    if (data) {
        const txt = event.clipboardData.getData("text/plain");
        console.log(txt);
        if (txt && txt.length < 1000) {
            postData(txt);
        }
    }
    // if (items && items.length) {
    //     console.log(items);
    //     // 检索剪切板items
    //     for (let i = 0; i < items.length; i++) {
    //         console.log(items[i]);
    //         if (items[i].type.indexOf("image") !== -1) {
    //             file = items[i].getAsFile();
    //             break;
    //         }
    //     }
    // }
};

const dropEvent = (event: any): void => {
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
        const img = files[i];
        if (img.type.indexOf("image") < 0 || img.size > 1024 * 512)
            continue;
        const reader = new FileReader();
        reader.onload = function(e): void {
            const data = e.target && e.target.result;
            data && postData(String(data));
        };
        reader.readAsDataURL(files[i]);
    }
};
const copyData = (str: string): void => {
    copyToClipboard(str);
};
onMounted(() => {
    document.addEventListener("paste", pasteEvent);
    document.addEventListener("drop", dropEvent);
})
</script>

<template>
  <div class="profile">
      <h2>欢迎您: {{ user }}</h2>
      <p>
          <input
              class="input"
              placeholder="输入文字并回车，或拖入图片"
              type="text"
              :value="txt"
              @input="(e: any) => txt = e.target.value"
              @keydown.enter="_ => postData(txt)"
          />
      </p>

      <ul>
          <li v-for="(link, index) in list" :key="index" @click="() => copyData(link)">
              <span v-if="link.indexOf('data') !== 0">{{ link }}</span>
              <img v-else :src="link" />
          </li>
      </ul>
  </div>
</template>

<style scoped>
.profile {
    padding: 56px 20px;
    min-height: 100%;
    width: 100%;
}

.profile ul {
    list-style: none;
    padding: 0;
    margin-top: 40px;
}

.profile ul li {
    color: #31344b;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 6px;
    border-color: #d1d9e6;
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
    word-break: break-all;
}

.profile ul li:hover {
    color: #1f348a;
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
}

.input {
    color: #1f348a;
    padding: 10px 20px;
    border-radius: 6px;
    /* border-color: #d1d9e6; */
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
    min-width: 80%;
}
</style>
